<template>
  <basic-container>
    <avue-crud
      :data="data"
      :option="option"
      :page.sync="page"
      @on-load="rowLoad"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @row-save="rowSave"
      @size-change="sizeChange"
      @current-change="currentChange">
    </avue-crud>
  </basic-container>
</template>

<script>
import avue from '@/mixins/avue.js'
import { SE } from '@/common/constants.js'
import {
  oauthClientDetails_page
} from '@/api/core/permission'
import {
  dict_item_list
} from '@/api/core/system'

export default {
  mixins: [avue],
  data () {
    return {
      menuDrawer: false,
      menuData: [],
      menuProps: {
        label: 'name'
      },
      menuDataRole: [],
      curRole: {},
      data: [],
      option: {
        column: [{
          width: 150,
          label: '编号',
          prop: 'clientId',
          align: 'center',
          sortable: true,
          rules: [{
            required: true,
            message: '请输入clientId',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              getObj(value).then(response => {
                if (window.boxType === 'edit') {
                  return callback()
                }
                const result = response.data.data
                if (result.length !== 0) {
                  callback(new Error('客户端已存在'))
                } else {
                  callback()
                }
              })
            },
            trigger: 'blur'
          }]
        }, {
          label: '密钥',
          prop: 'clientSecret',
          align: 'center',
          sortable: true,
          overHidden: true,
          width: 120,
          rules: [{
            required: true,
            message: '请输入clientSecret',
            trigger: 'blur'
          }]
        }, {
          label: '域',
          prop: 'scope',
          align: 'center',
          rules: [{
            required: true,
            message: '请输入scope',
            trigger: 'blur'
          }]
        }, {
          label: '授权模式',
          prop: 'authorizedGrantTypes',
          type: 'checkbox',
          border: true,
          dicData: [],
          props: {
            label: 'text',
            value: 'value'
          },
          rules: [{
            required: true,
            message: '请输入授权模式',
            trigger: 'blur'
          }]
        }, {
          label: '回调地址',
          prop: 'webServerRedirectUri',
          align: 'center',
          hide: true
        }, {
          label: '权限',
          prop: 'authorities',
          align: 'center',
          hide: true
        }, {
          label: '自动放行',
          prop: 'autoapprove',
          align: 'center',
          type: 'radio',
          border: true,
          dicData: [{
            label: '否',
            value: 'false'
          }, {
            label: '是',
            value: 'true'
          }],
          rules: [{
            required: true,
            message: '请选择是否放行',
            trigger: 'blur'
          }]
        }, {
          label: '令牌时效',
          type: 'number',
          min: 60,
          prop: 'accessTokenValidity',
          align: 'center'
        }, {
          label: '刷新时效',
          type: 'number',
          min: 3600,
          prop: 'refreshTokenValidity',
          align: 'center'
        }, {
          label: '扩展信息',
          prop: 'additionalInformation',
          align: 'center',
          hide: true
        }, {
          label: '资源ID',
          prop: 'resourceIds',
          align: 'center',
          hide: true
        }]
      }
    }
  },
  created () {
    dict_item_list({ code: 'GRANT_TYPES' }).then(res => {
      this.findObject(this.option.column, 'authorizedGrantTypes').dicData = res.result
    })
  },
  methods: {
    rowLoad () {
      oauthClientDetails_page(this.params).then((res) => {
        this.data = this.$s.res(res).records
      })
    },
    rowSave (row, loading, done) {
      role_add(row)
        .then((res) => {
          this.$s.suc(res)
        })
        .then(() => {
          this.rowLoad(this.params)
          done()
          loading()
        })
    },
    rowUpdate (row, loading, done) {
      role_edit(row)
        .then((res) => {
          this.$s.suc(res)
        })
        .then(() => {
          this.rowLoad(this.params)
          done()
          loading()
        })
    },
    rowDel (row, index, done) {
      this.$confirm('确定数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          role_delete({ ids: row.id }).then((res) => {
            this.$s.suc(res)
          })
        })
        .then(() => {
          this.rowLoad(this.params)
          done()
        })
    }
  },
  mounted () { }
}
</script>

<style lang="less" scoped>
.footer {
  display: flex;
}
</style>
